<template>
	<view>
		<view class="home-wrap u-m-b-20"
			:style="{ 'background': 'linear-gradient( 195deg, #F7CEBD 0%, #F5F6FA 100%) no-repeat', 'background-size': '100% 61%' }">
			<landlord-navbar :isBack="false" :background="{ 'background': 'transparent' }">
				<text slot="content" style="color: #000; width: 100%; text-align: center;padding-left: 20rpx;">
					{{ "消息" }}
				</text>
			</landlord-navbar>
			<view class="content-box">
				<view class="u-content u-p-10 u-m-l-20 u-m-r-20">
					<view class="u-content-nav">
						<view class="nav-item u-flex u-flex-column u-flex-items-center"
							@click="$Tips('/pages-landlord/chat/index')">
							<view class="u-content-nav-icon">
								<image src="/pages-landlord/static/images/xi2.png"></image>
							</view>
							<view class="u-content-nav-title">对话</view>
							<view class="unreadNum" v-if="unreadNum">{{ unreadNum > 99 ? '99+' : unreadNum }}</view>
						</view>
						<!-- <view class="u-flex u-flex-column u-flex-items-center" @click="jump('/pages-landlord/contract/contractList')">
							<view class="u-content-nav-icon"><image src="/pages-landlord/static/images/xi4.png"></image></view>
							<view class="u-content-nav-title">合同</view>
						</view> -->
						<view class="nav-item u-flex u-flex-column u-flex-items-center"
							>
							<view class="u-content-nav-icon">
								<image src="/pages-landlord/static/images/xi4.png"></image>
							</view>
							<view class="u-content-nav-title">租客</view>
						</view>
						<view @click="jump('/pages-landlord/settings/index')" class="nav-item u-flex u-flex-column u-flex-items-center">
							<view class="u-content-nav-icon">
								<image src="/pages-landlord/static/images/xi3.png"></image>
							</view>
							<view class="u-content-nav-title">系统</view>
						</view>
					</view>
				</view>
				<!--  消息列表-->
				<view class="u-flex u-flex-column u-m-t-30 message-list u-flex-items-start">
					<scroll-view @scrolltolower="lowerBottom" scroll-y="true" style="height: 100%;">
						<view class="u-flex u-flex-items-center u-flex-center u-flex-1 u-p-t-10 u-p-b-10 message-item"
							v-for="(item, index) in toolList" @click="jumps(item)">
							<image src="/pages-landlord/static/images/xi1.png" class="tool-icon u-m-r-20"></image>
							<view class="message-name u-flex u-flex-column u-flex-start u-flex-around">
								<view class="message-title u-ellipsis-1" style="font-size: 32rpx;">
									{{ item.title }}
								</view>
								<view class="message-sub-title u-ellipsis-2"
									style="color:#999999;font-size: 28rpx; display: flex; align-items: center;">
									{{ item.content }}
									<view v-if="item.status == 0" class="red"></view>

								</view>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import {
	mapMutations,
	mapActions,
	mapState,
	mapGetters
} from 'vuex';
import {
	lists
} from '@/api/landlord.js'
import {
	getnew_listDetail
} from "@/api/gent.js";
export default {
	data() {
		return {
			frompage: {
				page: 1,
				limit: 10
			},
			unreadNum: 0,
			toolList: [

			],
		};
	},
	computed: {
		...mapGetters(['isLogin', 'userInfo']),

	},
	mounted() {
		this.init();
	},
	async onReachBottom() {
		this.frompage.page++
		this.initdata()
	},
	methods: {
		getOwnerUnreadNum() {
			this.$Api.chat.getOwnerUnReadNumber().then(res => {
				this.unreadNum = res.data.data
			})
		},
		lowerBottom() {
			console.log("触底加载")
			this.frompage.page++
			this.initdata()
		},

		// 初始化
		init() {
			this.frompage.page = 1
			this.toolList = []
			this.initdata()
			this.getOwnerUnreadNum()
		},
		denglu() {
			this.$store.dispatch("showAuthModal", "1233");
		},
		initdata() {
			lists(this.frompage).then(res => {
				console.log(res.data.data);
				res.data.data.data.forEach(e => {
					this.toolList.push(e)
				});
			})
		},
		async jumps(item) {
			console.log(555, item.id);
			this.toolList.forEach(e => {
				console.log(e);
				if (item.id == e.id) {
					e.status = 1
					console.log(5555);
				}
			})
			const res = await getnew_listDetail({
				id: item.id
			});
			// return
			if (item.type == 0) {
				return;
			} else if (item.type == 1) {
				uni.navigateTo({
					url: "/pages-lease/bill/bill-detail?id=" + item.other_id,
				});
			} else if (item.type == 2) {
				uni.navigateTo({
					url: "/pages-landlord/contract/contractSigning?id=" + item.other_id,
				});
			} else if (item.type == 3) {
				uni.navigateTo({
					url: "/pages-landlord/repair/repair?id=" + item.other_id,
				});
				return;
			} else {
				uni.navigateTo({
					url: "/pages/mine/guideDetail?id=" + item.id + "&type=message",
				});
			}
		},
		// 路由跳转
		jump(item) {
			uni.navigateTo({
				url: item
			});
		},
	}
};
</script>

<style lang="scss" scoped>
.u-w-100s {
	width: 100%;
}

.cnt {
	font-family: PingFangSC, PingFang SC;
	font-weight: 400;
	font-size: 14px;
	color: #999999;
}

.uni-ec-canvas {
	width: 100%;
	height: 400rpx;
	display: block;
}

.uni-ec-canvas-bing {
	width: 100%;
	height: 200rpx;
	display: block;
}

page {
	background: #FFFFFF;
}

.red {
	width: 10rpx;
	height: 10rpx;
	border-radius: 50%;
	background: red;
	margin-left: 10rpx;
	display: inline-block;
	// position: absolute;
	// right: 20rpx;
	// top: 48%;
}

.kehu-item {
	border-radius: 20rpx;
	width: 100%;

	.swipers {
		width: 100%;
	}
}

.topic {
	background: #F5F5F5;
	border-radius: 20rpx;

	.topic_left {
		width: 70rpx;
		height: 50rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.topic_right {
		width: 96%;

		.title_right {
			.point {
				width: 10rpx;
				height: 10rpx;

				border-radius: 50%;
				background: #FA3E3E;
			}

			.arrow-right {
				width: 20rpx;
				height: 30rpx;
			}
		}

	}
}

.message-list {
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.9) 100%);
	box-shadow: 0px 2px 4px 0px rgba(255, 255, 255, 0.9);
	border-top-left-radius: 20rpx;
	border-top-right-radius: 20rpx;
	padding: 20rpx 0rpx 40rpx 10rpx;
	// border: 1rpx solid red;
	height: 55vh;
	overflow-y: auto;

	.message-item {

		// border: 1rpx solid red;
		width: 100%;

		.tool-icon {
			width: 112rpx;
			height: 112rpx;
		}

		.message-name {
			width: calc(100% - 190rpx);
			border-bottom: 2rpx solid #EEEEEE;
			height: 100rpx;
		}
	}

}

.u-content {
	border-radius: 20rpx;
	padding: 40rpx 30rpx 40rpx 30rpx;
	font-size: 24rpx;
	color: #333;
	z-index: 3;
	position: relative;
	background: linear-gradient(180deg, #FFF5F1 0%, rgba(255, 255, 255, 0.9) 100%);
	box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(53, 110, 253, 0.05);
	border-radius: 32rpx;
	border: 2rpx solid #FFFFFF;
	margin-top: 40rpx;

	.u-content-nav {
		padding: 30rpx 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		-webkit-border-radius: 20rpx;
		-moz-border-radius: 20rpx;
		border-radius: 20rpx;

		.nav-item {
			position: relative;
		}

		.unreadNum {
			position: absolute;
			top: -25rpx;
			right: -25rpx;
			width: 50rpx;
			height: 50rpx;
			line-height: 50rpx;
			text-align: center;
			border-radius: 50%;
			background-color: red;
			color: #ffffff;
			font-size: 22rpx;
		}

		.u-content-nav-title {
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 24rpx;
			color: #782400;
			line-height: 34rpx;
			text-align: left;
			font-style: normal;
			padding-top: 10rpx;
		}

		.u-content-nav-icon {
			width: 120rpx;
			height: 120rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}
	}

	.u-content-time {
		text-align: center;
		overflow: hidden;

		.avtar-url {
			/* 其他样式 */
			width: 140rpx;
			padding: 0px 5rpx;
			height: 140rpx;
			background: #faf1ed;
			border-radius: 50%;
			border: 1rpx solid #faf1ed;
			display: flex;
			font-weight: 700;
			justify-content: center;
			align-items: center;
		}

	}

}

.u-content-grid {
	padding: 32rpx 0 2rpx;
	background: #fff;
	box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(203, 253, 53, 0.05);
	border-radius: 16rpx;
	border: 2rpx solid #FFFFFF;
	margin-top: 20rpx;
	z-index: 2;
	position: relative;

	.swiper {
		height: 210rpx;
	}

	.u-content-grid-img {
		width: 86rpx;
		height: 113rpx;
		padding-bottom: 16rpx;
	}

	.grid-text {
		font-size: 24rpx;
		color: #434343;
		padding: 0rpx 0 38rpx 0rpx;
		/* #ifndef APP-PLUS */
		box-sizing: border-box;
		/* #endif */
	}
}

.pay-item {
	width: 25%;
}

.top-yuangong {
	position: relative;

	.top-yuangong-item {
		width: 25%;
	}

	.top-icon {
		width: 50rpx;
		height: 50rpx;
		position: absolute;
		top: 24%;
		left: -2%;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.topnum {
		font-size: 30rpx;
		color: #333;
	}

	.topname {
		font-size: 24rpx;
		margin-top: 14rpx;
		color: #999;
	}

	.tool-icon {
		width: 80rpx;
		height: 80rpx;
	}
}
</style>